Skip to main content

Styling and Layout

Adding Last Updated Feature​

Official Docs can be found here. Link

Example

Creating a GitHub Repository​

First we need to create a GitHub Repository.

When you are done creating your new repository we will have to add SSH Keys to your account

In the upper-right corner of any page, click your profile photo, then click Settings.

GitHub Settings

In the "Access" section of the sidebar, click SSH and GPG keys.

SSH and GPG keys

Click New SSH key

New SSH key

You should now see this screen

Paste key

note

I used my repo name BankaiTechDocs for the Key name
Key type is Authentication key

Creating local SSH key​

Go to your temninal and run this command

ssh-keygen -t ed25519 -C "[email protected]"

Press ENTER and follow the prompts

Generate Keys

Recommended

You do not need to enter a passphrase but it is recommended for security

warning

If you do use a Passphrase, please keep it safe as you will need it every time you run Git pull or Git push

Run the following command and copy the contents of the result

cat <location of new ssh key>
info

I ran cat /root/.ssh/id_ed25519.pub

Adding SSH key to GitHub​

Go back over to GitHub and Paste the SSH key you just copied

key

Press Add SSH key

Creating a local .git repo​

Go to the root directory of your website

note

This directory will contain your docusaurus.config.js or docusaurus.config.ts file

In your terminal, run the following commands

git init
git config --global user.name "<USER_NAME>"
git config --global user.email "<USER_EMAIL>"

Connecting to the remote Repo​

We are going to need the SSH url for your repo, we can find that here

Repo URL

Run this command to add your remote repo

git remote add origin <SSh Repo URL>
Example

[email protected]:TrueBankai416/BankaiTechDocs.git

Now run the following commands

git add -A
git commit -m 'main'
git push  origin master
git pull origin main

You should now be able to make changes on GitHub and then run git pull origin main to download the changes locally, or you can make changes locally and run git push origin main to send the changes to GitHub

note

When you run git pull origin main you will have to run npm run build afterwards to apply the changes

Editing the docusaurus config file​

We will need to first make some changes in your docusaurus.config.js file

nano docusaurus.config.js

Find the following Snippet of code

  presets: [
    [
      'classic',
      {
        docs: {
          routeBasePath: '/', // Serve the docs at the site's root
          sidebarPath: './sidebars.js',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
        //  editUrl:
        //    'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        blog: false, //{
      //    showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
        //  editUrl:
        //    'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
       // },
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],
  ],

Add the following lines in the docs section

          showLastUpdateAuthor: true,
          showLastUpdateTime: true,

The snippet of code should now look like this

  presets: [
    [
      'classic',
      {
        docs: {
          showLastUpdateAuthor: true,
          showLastUpdateTime: true,
          routeBasePath: '/', // Serve the docs at the site's root
          sidebarPath: './sidebars.js',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
        //  editUrl:
        //    'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        blog: false, //{
      //    showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
        //  editUrl:
        //    'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
       // },
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],
  ],

Adding the last updated to Font Matter​

Open up one of your .md files in /docs

Add the following lines to the top of the file

---
last_update:
  author: custom author name
---
note

You will have to add this too all of your .md files

Now everytime you run git pull origin main and npm run build it will update the last_updated line from git history

References​

Font Matter Options
Introduction to GIT
How to Push Existing Project to GitHub
GitHub Remote Repositories
Adding SSH key to GitHub
Generating SSH key to local System